<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('环境配置列表')"/>
    <style>
        /* 商务风格CSS变量 */
        :root { 
            --primary-color: #2c5aa0;
            --secondary-color: #34495e;
            --accent-color: #3498db;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-bg: #f8f9fa;
            --white: #ffffff;
            --border-color: #e1e8ed;
            --text-primary: #2c3e50;
            --text-secondary: #7f8c8d;
            --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
            --shadow-medium: 0 4px 12px rgba(0,0,0,0.15);
            --border-radius: 8px;
        }

        /* 容器优化 */
        .container-div {
            background: var(--light-bg);
            min-height: 100vh;
            padding: 20px;
        }

        /* 搜索面板商务化 */
        .search-collapse {
            background: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
        }

        .select-list {
            padding: 20px;
        }

        .select-list ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 20px;
        }

        .select-list ul li {
            display: flex;
            align-items: center;
            margin: 0;
            white-space: nowrap;
        }

        .select-list ul li label {
            font-weight: 600;
            color: var(--text-primary);
            margin-right: 8px;
            margin-bottom: 0;
            font-size: 14px;
            min-width: auto;
        }

        .select-list ul li input[type="text"] {
            width: 180px;
            height: 36px;
            border: 2px solid var(--border-color);
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: var(--white);
        }

        .select-list ul li input[type="text"]:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            outline: none;
        }

        /* 按钮商务化 */
        .btn {
            border-radius: 6px;
            font-weight: 500;
            padding: 8px 16px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: var(--white);
            box-shadow: var(--shadow-light);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

        .btn-warning {
            background: linear-gradient(135deg, var(--warning-color), #e67e22);
            color: var(--white);
            box-shadow: var(--shadow-light);
        }

        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

        /* 工具栏商务化 */
        #toolbar {
            background: var(--white);
            padding: 15px 20px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
        }

        #toolbar .btn {
            margin-right: 10px;
        }

        .btn-success {
            background: linear-gradient(135deg, var(--success-color), #2ecc71);
            color: var(--white);
        }

        .btn-danger {
            background: linear-gradient(135deg, var(--danger-color), #c0392b);
            color: var(--white);
        }

        /* 表格商务化 */
        .select-table {
            background: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            padding: 20px;
            border: 1px solid var(--border-color);
        }

        /* Bootstrap表格优化 */
        .table {
            margin-bottom: 0;
        }

        .table thead th {
            background: linear-gradient(135deg, var(--secondary-color), #2c3e50);
            color: var(--white);
            border: none;
            font-weight: 600;
            padding: 15px 12px;
            font-size: 14px;
        }

        .table tbody tr {
            transition: all 0.3s ease;
        }

        .table tbody tr:hover {
            background-color: rgba(52, 152, 219, 0.05);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .table tbody td {
            padding: 12px;
            border-color: var(--border-color);
            vertical-align: middle;
        }

        /* 响应式优化 */
        @media (max-width: 768px) {
            .select-list ul {
                flex-direction: column;
                align-items: stretch;
                gap: 15px;
            }

            .select-list ul li {
                flex-direction: column;
                align-items: flex-start;
            }

            .select-list ul li label {
                margin-bottom: 5px;
            }

            .select-list ul li input[type="text"] {
                width: 100%;
            }

            #toolbar {
                text-align: center;
            }

            #toolbar .btn {
                margin: 5px;
            }
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>应用名称：</label>
                            <input type="text" name="appName"/>
                        </li>
                        <li>
                            <label>ip地址：</label>
                            <input type="text" name="ip"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="server:config:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.edit()"
               shiro:hasPermission="server:config:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="server:config:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="server:config:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('server:config:edit')}]];
    var removeFlag = [[${@permission.hasPermi('server:config:remove')}]];
    var prefix = ctx + "server/config";

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "环境配置",
            columns: [{
                checkbox: true
            },
                {
                    field: 'configId',
                    title: '主键id',
                    visible: false
                },
                {
                    field: 'clientName',
                    title: '客户端名称'
                },
                {
                    field: 'appName',
                    title: '应用名称'
                },
                {
                    field: 'ip',
                    title: 'ip地址'
                },
                {
                    field: 'port',
                    title: '端口'
                },
                {
                    field: 'repositoryUrl',
                    title: '仓库地址'
                },
                {
                    field: 'coverageType',
                    title: '覆盖率类型'
                },
                {
                    field: 'versionStart',
                    title: '起始版本'
                },
                {
                    field: 'versionNow',
                    title: '当前版本'
                },
                {
                    field: 'lastReportDir',
                    title: '最近一次报告',
                    formatter: function (value, row, index) {
                        return '<a href="#" onclick="createMenuItem(\'' + row.lastReportDir + '\')"><i></i>查看报告</a> ';
                    }
                },
                {
                    field: 'createBy',
                    title: '创建人'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        // actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.configId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        // actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.configId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.post(\'' + prefix + '/report/' + row.configId + '\')"><i class="fa fa-creative-commons"></i>生成报告</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    /** 创建选项卡 */
    function createMenuItem(dataUrl) {
        menuName = dataUrl
        dataIndex = $.common.random(1, 100),
            flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
        var topWindow = $(window.parent.document);
        // 创建选项卡带了参数时，data-id唯一标识截取？前的字符
        var dataId = "";
        if (dataUrl.indexOf('?') >= 0) {
            dataId = dataUrl.substring(dataUrl.indexOf('?'), dataUrl.length);
        } else {
            dataId = dataUrl;
        }
        // 选项卡菜单已存在
        $('.menuTab', topWindow).each(function () {
            console.log("thisdataId=" + $(this).data('id'));
            if ($(this).data('id') == dataId) {
                //选项卡菜单已存在先关闭，再重新打开
                $(this).remove();
            }
        });

        // 选项卡菜单不存在
        if (flag) {
            var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataId + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
            $('.menuTab', topWindow).removeClass('active');
            // 添加选项卡对应的iframe
            var str1 = '<iframe class="Jtest_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataId + '" seamless></iframe>';
            $('.mainContent', topWindow).find('iframe.Jtest_iframe').hide().parents('.mainContent').append(str1);
            // 添加选项卡
            $('.menuTabs .page-tabs-content', topWindow).append(str);
        }
        return false;
    }
</script>
</body>
</html>